<template>
  <div id="body">
    <el-container>
      <el-header style="
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 999;
          padding: 0;
        ">
        <menu-bar :transparency="top"></menu-bar>
      </el-header>

      <el-main style="padding: 0">
        <!--       轮播图-->
        <div class="home-middle-top" style="margin-bottom: 80px">
          <el-row>
            <el-col :span="24" class="banner_img">
              <img ref="bannerHeight" style="object-fit: cover;" :src="nation.cover" class="bannerImg"
              />
            </el-col>
          </el-row>

        </div>

        <el-divider>
          <p style="font-weight: 500; font-size: 28px; ">
            民族的简介
          </p>
        </el-divider>

        <div style=" padding-left: 200px;padding-top: 40px">

          <div style="margin:0 auto">
            <el-row>
              <el-col :span="6"><img :src="nation.image" style="height: 450px"></el-col>
              <el-col :span="14"><h2>{{ nation.synopsis }}</h2></el-col>
            </el-row>
            <a style="margin-left: 1000px;
           text-decoration: none;
           color: #292929;
           font-size: 20px" :href="'/ethnic/detail?id=' + nation.id">详情...</a>
          </div>

        </div>

        <!--       专栏-->
        <div style="max-width: 1400px; margin: auto; ">
          <div style="margin: 40px 0">
            <el-divider>
              <p style="font-weight: 500; font-size: 28px">
                饮食起居
              </p>
            </el-divider>
          </div>
          <!--           文章-->
          <el-row :gutter="50" v-if="diet.length != 0">
            <el-col :span="6" v-for="a in diet" :key="a.index">
              <article-card :article="a"></article-card>
            </el-col>
          </el-row>
          <el-empty v-else description="暂无数据"></el-empty>


          <div style="margin: 40px 0">
            <el-divider>
              <p style="font-weight: 500; font-size: 28px">
                风俗习惯
              </p>
            </el-divider>
          </div>
          <!--文章-->
          <el-row :gutter="50" v-if="custom.length != 0">
            <el-col :span="6" v-for="b in custom" :key="b.index">
              <article-card :article="b"></article-card>
            </el-col>
          </el-row>

          <el-empty v-else description="暂无数据"></el-empty>

          <div style="margin: 40px 0">
            <el-divider>
              <p style="font-weight: 500; font-size: 28px">
                节日庆典
              </p>
            </el-divider>
          </div>
          <!--文章-->
          <el-row :gutter="50"  v-if="festival.length != 0">
            <el-col :span="6" v-for="c in festival" :key="c.index">
              <article-card :article="c"></article-card>
            </el-col>
          </el-row>

          <el-empty v-else description="暂无数据"></el-empty>

          <div style="margin: 40px 0">
            <el-divider>
              <p style="font-weight: 500; font-size: 28px">
                文化艺术
              </p>
            </el-divider>
          </div>
          <!--         文章-->
          <el-row :gutter="50"  v-if="art.length != 0">
            <el-col :span="6" v-for="d in art" :key="d.index">
              <article-card :article="d"></article-card>
            </el-col>
          </el-row>

          <el-empty v-else description="暂无数据"></el-empty>

        </div>


      </el-main>

      <!-- 页脚 -->
      <el-footer style="padding: 0">
        <!--        <page-footer></page-footer>-->
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import MenuBar from "@/components/MenuBar";
import ArticleCard from "@/components/ArticleCard";
import PageFooter from "@/components/PageFooter";

export default {
  components: {MenuBar, PageFooter, ArticleCard},
  data() {
    return {
      nationId: this.$route.query.nid,
      userId: "",
      articles: [],
      bannerHeight: '',
      nation: {},

      allArticle:{},

      diet:[],
      custom:[],
      festival:[],
      art:[],


      category4: [{
        title: "title",
        content: "content",
        cover: "https://desk-fd.zol-img.com.cn/t_s640x530c5/g6/M00/08/05/ChMkKV9HRNqICGAuAFH2iE7PUl8AABhEgAAAAAAUfag615.jpg",
        nickname: "String",
        avatar: "",
        href: ""
      }],
      top: 0
    }
  },

  created() {
    console.log("nation:{}", this.nationId);
    this.getNation();
    this.getArticle();
  },
  methods: {
    getNation() {
      this.axios.get("/nation/get-nation-by-id?id=" + this.nationId).then(({data}) => {
        if (data.state == 20000) {
          this.nation = data.data;

        } else {
          this.$message.error(data.message);
        }
      });
    },
    getArticle(){
      this.axios.get("/article/get-list-by-nation-id?nationId=" + this.nationId).then(({data}) => {
        if (data.state == 20000) {
          this.allArticle = data.data;
          this.allArticle.forEach((item)=>{
            switch (item.categoryName){
              case '饮食起居':
                this.diet.push(item);break;
              case '风俗习惯':
                this.custom.push(item);break;
              case '节日庆典':
                this.festival.push(item);break;
              case '文化艺术':
                this.art.push(item);break;
            }
          })
        } else {
          this.$message.error(data.message);
        }
      });
    },

  },
  mounted() {
    window.addEventListener('resize', () => {
      this.bannerHeight = this.$refs.bannerHeight[0].height
    }),
        // 获取滚动条距离顶部的位置
        window.addEventListener('scroll', () => {
          let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
          if (top <= 300) {
            this.top = top / 300;
          } else {
            this.top = 1;
          }

        })
  }

}
</script>

<style scoped>
.home-middle-top {
  height: 42%;
  overflow: hidden;
  /*margin-bottom: 10vh;*/
  background-color: rgb(255, 255, 255);
}

.home-middle-bottom {
  height: 52%;
  margin-top: 3%;
}

.home-middle-top img {
  display: block;
  width: 100%;
  height: 100%;
}

.bannerImg {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
</style>